<template>
  <div class="course">
    <!-- <tabs class="tabs" :currentIndex="currentIndex" @changeCurrentIndex="changeCurrentIndex">
      <tab class="tab" tabName="难易程度" index="1"><CourseList/></tab>
      <tab class="tab" tabName="不限器材" index="2"><CourseList/></tab>
      <tab class="tab" tabName="不限部位" index="3"><CourseList/></tab>
    </tabs> -->

  <div class="courseContont">
    <!-- <img v-for="(item,idnex) in courseData" :key="index" :src="" alt=""> -->
    <img :src='courseData[0]' alt="">
    <img :src='courseData[1]' alt="">
    <img :src='courseData[2]' alt="">
  </div>
  </div>
</template>
<script>
import CourseList from "../subpageList/CourseList";
export default {
  name: "Course",
  data() {
    return {
      currentIndex: "1",
      courseData:[]
    };
  },
  components: {
    CourseList
  },
  methods: {
  },
  mounted(){
    this.$api.course.fitnesscourse(null)
    .then(res=>{
        // console.log(res.data.equipment)
        this.courseData=res.data.equipment
    })
    .catch(error=>{
        console.log(error)
    })
  }
};
</script>
<style scoped lang="less">

.course{
  background-color: #efefef;
  overflow: hidden;
    // .tabs {
    // display: flex;
    // width: 100%;
    // list-style: none;
    // margin: 0;
    // padding: 0;
    // top:2.6rem;
    // position: fixed;
    
    // .tab{
    //   background-color:#efefef;
    //   border: none;
    //   color: #555;
    //   font-size: 16px;
    //   height: 2.3rem;
    // }
    // .active {
    //   color: #555;
    // }
    // }
    .courseContont{
      padding: 5px ;
      background-color: #ffffff;
      margin-top: 2.5rem;
      img{
        width: 100%;
        margin-top: 10px;
      }
    }

}

</style>

